// 基本的DOM操作示例

// 主题切换功能
let currentTheme = 'light'; // 默认主题为浅色模式

// 切换主题函数
function switchTheme(theme) {
    currentTheme = theme;
    
    // 更新HTML的data-theme属性
    document.documentElement.setAttribute('data-theme', theme);
    
    // 更新主题切换按钮图标
    const themeBtn = document.getElementById('theme-btn');
    if (themeBtn) {
        const themeIcon = themeBtn.querySelector('.theme-icon');
        if (themeIcon) {
            themeIcon.textContent = theme === 'light' ? '🌙' : '☀️';
        }
    }
    
    // 保存主题偏好到localStorage
    localStorage.setItem('preferredTheme', theme);
}

// 从localStorage加载保存的主题偏好
function loadThemePreference() {
    const savedTheme = localStorage.getItem('preferredTheme');
    if (savedTheme) {
        switchTheme(savedTheme);
    }
}

// 语言切换功能
let currentLang = 'zh'; // 默认语言为中文

// 切换语言函数
function switchLanguage(lang) {
    currentLang = lang;
    
    // 更新所有带有data-zh和data-en属性的元素
    const elements = document.querySelectorAll('[data-zh][data-en]');
    elements.forEach(element => {
        if (lang === 'zh') {
            element.textContent = element.getAttribute('data-zh');
        } else {
            element.textContent = element.getAttribute('data-en');
        }
    });
    
    // 更新HTML的lang属性
    document.documentElement.lang = lang === 'zh' ? 'zh-CN' : 'en-US';
    
    // 更新语言切换按钮文本
    const langBtn = document.getElementById('lang-btn');
    if (langBtn) {
        langBtn.textContent = lang === 'zh' ? '中 / EN' : 'EN / 中';
    }
    
    // 保存语言偏好到localStorage
    localStorage.setItem('preferredLanguage', lang);
}

// 从localStorage加载保存的语言偏好
function loadLanguagePreference() {
    const savedLang = localStorage.getItem('preferredLanguage');
    if (savedLang) {
        switchLanguage(savedLang);
    }
}

// 等待DOM加载完成
document.addEventListener('DOMContentLoaded', function() {
    // 加载保存的主题偏好
    loadThemePreference();
    
    // 加载保存的语言偏好
    loadLanguagePreference();
    
    // 主题切换按钮点击事件
    const themeBtn = document.getElementById('theme-btn');
    if (themeBtn) {
        themeBtn.addEventListener('click', function() {
            const newTheme = currentTheme === 'light' ? 'dark' : 'light';
            switchTheme(newTheme);
        });
    }
    
    // 语言切换按钮点击事件
    const langBtn = document.getElementById('lang-btn');
    if (langBtn) {
        langBtn.addEventListener('click', function() {
            const newLang = currentLang === 'zh' ? 'en' : 'zh';
            switchLanguage(newLang);
        });
    }
    
    // CTA按钮点击事件
    const ctaButton = document.getElementById('cta-button');
    if (ctaButton) {
        ctaButton.addEventListener('click', function() {
            const message = currentLang === 'zh' ? 
                '欢迎访问我的作品集！了解更多关于我的信息。' : 
                'Welcome to my portfolio! Learn more about me.';
            alert(message);
        });
    }

    // 表单提交事件
    const contactForm = document.getElementById('contact-form');
    if (contactForm) {
        contactForm.addEventListener('submit', function(e) {
            e.preventDefault();
            
            // 获取表单数据
            const name = document.getElementById('name').value;
            const email = document.getElementById('email').value;
            const message = document.getElementById('message').value;
            
            // 简单验证
            if (name && email && message) {
                // 在实际应用中，这里会发送数据到服务器
                alert(`感谢您的消息，${name}！我会尽快回复您。`);
                contactForm.reset();
            } else {
                alert('请填写所有字段。');
            }
        });
    }

    // 平滑滚动到锚点
    const navLinks = document.querySelectorAll('a[href^="#"]');
    navLinks.forEach(link => {
        link.addEventListener('click', function(e) {
            e.preventDefault();
            
            const targetId = this.getAttribute('href');
            const targetSection = document.querySelector(targetId);
            
            if (targetSection) {
                window.scrollTo({
                    top: targetSection.offsetTop - 80, // 考虑固定导航的高度
                    behavior: 'smooth'
                });
            }
        });
    });

    // 项目卡片悬停效果增强
    const projectCards = document.querySelectorAll('.project-card');
    projectCards.forEach(card => {
        card.addEventListener('mouseenter', function() {
            this.style.boxShadow = '0 8px 16px rgba(0, 0, 0, 0.2)';
        });
        
        card.addEventListener('mouseleave', function() {
            this.style.boxShadow = '0 4px 6px rgba(0, 0, 0, 0.1)';
        });
    });

    // 页面滚动时的动态效果
    window.addEventListener('scroll', function() {
        const header = document.querySelector('header');
        if (window.scrollY > 50) {
            header.style.backgroundColor = 'rgba(44, 62, 80, 0.95)';
            header.style.boxShadow = '0 2px 10px rgba(0, 0, 0, 0.1)';
        } else {
            header.style.backgroundColor = '#2c3e50';
            header.style.boxShadow = 'none';
        }
    });
});

// 简单的动画函数示例
function animateElement(element, from, to, duration) {
    let start = null;
    const animate = (timestamp) => {
        if (!start) start = timestamp;
        const progress = timestamp - start;
        const value = from + (to - from) * Math.min(progress / duration, 1);
        
        element.style.opacity = value;
        
        if (progress < duration) {
            requestAnimationFrame(animate);
        }
    };
    
    requestAnimationFrame(animate);
}

// 页面加载完成后的初始化
window.addEventListener('load', function() {
    // 可以在这里添加更多初始化代码
    console.log('作品集网站已加载完成！');
});
